<template>
  <q-dialog v-model="detail"  >
      <OrderDetailPage :part-id="partId" :order-id="orderId"></OrderDetailPage>
  </q-dialog>
  <q-dialog v-model="repairingDetail" >
    <MyBigDialog title="Repairing Detail">
      <FinalCheckForm class="q-pa-md" mode="report" :is-parent="isParent" :serial-no="serialNo" :stock-code="stockCode" :order-id="orderId"></FinalCheckForm>
    </MyBigDialog>
  </q-dialog>
  <q-dialog v-model="searchDig"  >
      <HistoryFilterForm @filter="search"></HistoryFilterForm>
  </q-dialog>
  <ReportPage>
    <q-table
      class="my-table card-radius"
      wrap-cells
      flat
      bordered
      title="History"
      titleClass="page-header"
      :columns="columns"
      :rows="filterRows"
      :filter="filter"
      :pagination="{ rowsPerPage: 50 }"
      row-key="id"
      no-data-label="No history found."
      no-results-label="The filter didn't uncover any results"
      >
      <!-- @row-dblclick="onRowClick" -->

      <template v-slot:top-row="props">
          <ColsFilter :filter="props.cols" ref="colsFilter"></ColsFilter>
      </template>
      

      <template v-slot:top-right>
        <q-card-actions>
          <q-btn
            class="default-btn"
            label="Search"
            no-caps
            @click="searchDig = true"
          />
          <q-btn
            class="blue-btn"
            icon-right="archive"
            label="Export to csv"
            no-caps
            @click="exportTable(columns, filterRows, header)"
          />
        </q-card-actions>
      </template>

      <!-- <template v-slot:body-cell-serial_no="props">
          <q-td :props="props">
              {{ props.value }}
              <ObsolescenceTip v-if="props.row.obsolescence==1"></ObsolescenceTip>
          </q-td>
        </template> -->
        

      <template v-slot:body-cell-test_result="props">
        <q-td>
          <q-btn
            class="q-mr-sm"
            size="sm"
            style="padding:0 10px"
            color="indigo-8"
            :label="props.value==''?'-----':props.value"
            no-caps
            @click="openRepairingDetail(props.row.id, props.row.stock_code, props.row.serial_no, props.row.is_parent)"
          />
        </q-td>
      </template>
      
      <template v-slot:body-cell-detail="props">
        <q-td>
          <q-btn
            class="q-mr-sm"
            size="sm"
            style="padding:0 10px"
            color="indigo-8"
            label="Detail"
            no-caps
            @click="openOrderDetail(props.row.id, props.row.part_id)"
          />
        </q-td>
      </template>

      <template v-slot:no-data="{ icon, message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <!-- <q-icon size="2em" name="sentiment_dissatisfied" /> -->
          <q-icon size="2em" :name=icon />
          <span> {{ message }} </span>
        </div>
      </template>
    </q-table>
  </ReportPage>
</template>

<script setup lang="ts">
import ReportPage from 'src/pages/ReportPage.vue';
import { HistoryReport, HistorySearch, RepairOrderHistory } from 'src/services/type';
import { computed, ref } from 'vue';
import { QTableColumn, useQuasar } from 'quasar';
import { exportTable } from 'src/utils/exportCsvUtils';
import { repairOrderHistory } from 'src/services/reportService';
import { formatDateTimeString } from 'src/utils/dateUtils';
import MyBigDialog from '../container/MyBigDialog.vue';
import OrderDetailPage from '../maintenance/OrderDetailPage.vue';
import FinalCheckForm from '../maintenance/FinalCheckForm.vue';
import { useRouter } from 'vue-router';
import ColsFilter from '../table/ColsFilter.vue';
// import ObsolescenceTip from '../ObsolescenceTip.vue';
import HistoryFilterForm from 'src/components/reportTable/HistoryFilterForm.vue'

const header = ref('History');
const filter = ref('');

const align = 'left'

const columns: QTableColumn[] = [
/*   {
    name: 'id',
    label: '#',
    align,
    field: 'id',
    headerStyle: 'width: 80px !important', 
    sortable: true,
  }, */
  {
    name: 'job_order',
    align,
    label: 'Job Order',
    field: 'jo',
    headerStyle: 'width: 100px !important', 
    sortable: true,
  },
  {
    name: 'system',
    align,
    label: 'System',
    field: 'system',
    sortable: true,
  },
  {
    name: 'serial_no',
    align,
    label: 'Serial No.',
    field: 'serial_no',
    sortable: true,
  },
  {
    name: 'stock_code',
    align,
    label: 'Stock Code',
    field: 'stock_code',
    sortable: true,
  },
  {
    name: 'workgroup',
    align,
    label: 'Work Group',
    field: 'workgroup',
    sortable: true,
  },
  // {
  //   name: 'deliver_to',
  //   align,
  //   label: 'Deliver To',
  //   field: 'deliver_to',
  //   sortable: true,
  // },
  // {
  //   name: 'repair_details',
  //   align,
  //   label: 'Repair Details',
  //   field: 'repair_details',
  //   sortable: true,
  // },
  {
    name: 'actions',
    align,
    label: 'Action',
    field: 'actions',
    sortable: true,
  },
  {
    name: 'remarks',
    align,
    label: 'Remarks',
    field: 'remarks',
    sortable: true,
  },
  {
    name: 'location',
    align,
    label: 'Location',
    field: 'location',
    sortable: true,
  },
  {
    name: 'test_result',
    align,
    label: 'Test Result',
    field: 'test_result',
    sortable: true,
  },
  {
    name: 'delivery to',
    align,
    label: 'Delivery To',
    field: 'deliver_to',
    sortable: true,
  },
  {
    name: 'check_in',
    align,
    label: 'Check In Time',
    field: 'check_in',
    format: (val)=>formatDateTimeString(val),
    headerStyle: 'width: 90px !important', 
    sortable: true,
  },
  {
    name: 'check_out',
    align,
    label: 'Check Out Time',
    field: 'check_out',
    format: (val)=>formatDateTimeString(val),
    headerStyle: 'width: 90px !important', 
    sortable: true,
  },
/*   {
    name: 'detail',
    align,
    label: '',
    field: 'detail',
  } */
];

const $q = useQuasar();

/* const = ref() */
const orderId = ref(0)
const partId = ref(0)
const serialNo = ref('')
const stockCode = ref('')
const isParent = ref(false)

const searchDig = ref(false)

const detail = ref(false)
const repairingDetail = ref(false)

const rows = ref<RepairOrderHistory[]>()

async function search(form: { data: HistorySearch}){
  showLoading()
  const res =  await repairOrderHistory(form.data)
  console.log(res);
  rows.value = res
  searchDig.value = false
  $q.loading.hide()
}


function showLoading() {
  $q.loading.show({
    message: 'Doing something. Please wait...',
    boxClass: 'bg-grey-2 text-grey-9',
    spinnerColor: 'primary',
  });
}

function openOrderDetail(order_id: number, part_id:number){
  detail.value = true
  orderId.value =order_id
  partId.value =part_id
}

function openRepairingDetail(order_id: number, stock_code: string, serial_no: string, is_parent: boolean){
  repairingDetail.value = true
  orderId.value = order_id
  stockCode.value = stock_code
  serialNo.value = serial_no
  isParent.value = is_parent
  
}

const router = useRouter();

function onRowClick(evt: any, row: any) {
  router.push(`/maintenance/order/${row.id}`);

}

const colsFilter = ref<typeof ColsFilter>();

function filterFn(row: RepairOrderHistory) {
  if (colsFilter.value) {
    return colsFilter.value.filterFn(row);
  }
}

const filterRows = computed(() => {
  return rows.value?.filter(filterFn);
});

// function dblclickFn(evt: any, row: RepairOrderHistory, index: number) {
//   id.value = row.id ;
//   part_id.value = row.part_id ;
//   detail.value = true;
// }
</script>

<style scoped></style>
